<template>
  <div ref="wrapRef">
    <a-table
      ref="tableElRef"
      @change="handleTableChange"
      :customRow="handleCustomRow"
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
    />
  </div>
</template>

<script lang="ts" setup>
  // import type { PaginationProps } from './types/pagination'
  import { computed, watch } from 'vue'
  // import { basicProps } from './props'
  interface Props {
    loading: boolean
    dataSource: any
    columns: any
    currnt: number
    size: number
  }
  const props = withDefaults(defineProps<Props>(), {
    loading: false,
    dataSource: [],
    columns: [],
    current: 2,
    size: 10,
  })

  function handleCustomRow(record, index) {
    console.log(index, record)
    return {
      onClick: (event) => {
        console.log(event)
      },
      onDblclick: (event) => {
        console.log(event)
      },
    }
  }

  function handleTableChange(pagination, filters, sorter, { currentDataSource }) {
    console.log('handleTableChange', pagination)
    console.log('handleTableChange', filters)
    console.log('handleTableChange', sorter)
    console.log('handleTableChange', currentDataSource)
  }

  const pagination = computed(() => ({
    total: 200,
    current: props?.current,
    pageSize: props?.size,
  }))

  export interface mPageParam {
    current?: number
    size?: number
  }

  watch(
    () => props.current,
    (newVal, oldVal) => {
      console.log('监听基本类型数据testStr')
      console.log('new', newVal)
      console.log('old', oldVal)
    },
  )
</script>
